<template>
    <div class="header">
        <div class="title">{{title}}</div>
        <div class="icon" >
            <i class="el-icon-caret-right"></i>
        </div>
    </div>
</template>

<script>
    export default {
        name: "slide-header",
        props: {
            title: {
                type: String,
                default: () => ''
            },
        }
    }
</script>

<style scoped>
    .header {
        background: black;
        color: white;
        font-size: 16px;
        display: flex;
        justify-content: space-between;
        padding: 12px 0px;
        cursor: pointer;
    }

    .header:hover {
        background: chocolate;
    }

    .title {
        margin-left: 12px;
    }

    .icon {
        margin-right: 12px;
    }
</style>